<template>
  <div class="realName">
    <div class="tit">
      实名认证
      <span>実名認証</span>
    </div>
    <div v-if="isC">
      <div class="front">
        <div class="con">
          <img class="left" src="../../assets/images/card1.png" alt="">
          <div class="right">
            <img src="../../assets/images/icon8.png" alt="">
            <p>身份证正面</p>
            <input @change="fileImage($event,1)" class="upload" type="file" accept="" value=""  />
          </div>
        </div>
      </div>
      <div class="front">
        <div class="con">
          <img class="left" src="../../assets/images/card2.png" alt="">
          <div class="right">
            <img src="../../assets/images/icon8.png" alt="">
            <p>身份证反面</p>
            <input @change="fileImage($event,2)" class="upload" type="file" accept="" value=""  />
          </div>
        </div>
      </div>
      <button @click="save" class="save">完成</button>
    </div>
    <div class="completed" v-if="!isC">
      <img src="../../assets/images/ava.png" alt="">
      <span>{{name | pass(1)}}</span>
      <p>{{idCard | pass(2)}}</p>
      <button>已认证</button>
    </div>
  </div>
</template>

<script>
import { Toast } from 'mint-ui'
export default {

  data () {
    return {
      isC:true,
      idCard:211382199006263334,
      name:'刘福松',
      reverseImg:'',
      frontImg:''
    }
  },

  methods: {
    fileImage(e,num){
      
        var _this = this
        var file = e.target.files[0];
        var imgSize=file.size/1024;
        if(imgSize>200){
            alert('请上传大小不要超过200KB的图片')
        }else{
            var reader = new FileReader();
            reader.readAsDataURL(file); // 读出 base64
            
            reader.onloadend = ()=>{
                // 图片的 base64 格式, 可以直接当成 img 的 src 属性值        
                var dataURL = reader.result;
                
                if(num==1){
                  console.log(dataURL)
                  _this.frontImg = dataURL
                  Toast('上传正面成功')
                  
                }else{
                  _this.reverseImg = dataURL
                  Toast('上传反面成功')
                  
                }
                // 下面逻辑处理
                // $.ajax({
                //     type:"post",
                //     url:"/v1/userSet",
                //     async:true,
                //     data:{
                //         avatar:dataURL,
                //         avatar_wx:1,
                //         token:token,
                //         uid:uid,
                //     },
                //     success:function(e){
                //         that.avatar=dataURL;
                //         alert('修改成功');
                //         $(".tsk").show().delay(1500).hide(0);
                //     }
                // });
            };
        }

    },
    save(){
      
      if(!this.frontImg){
        Toast('请选择正面')
        return;
      }
      if(!this.reverseImg){
        Toast('请选择反面')
        return;
      }
      
      Toast('认证成功')

      setTimeout(()=>{
        this.isC =false
      },1000)
    }
  },

  created () {
  },

  filters:{
    pass(inp,num){
      if(num==1){
        console.log(inp)
        var start = inp.substr(1,inp.length);
        return '*'+start
      }else{
        inp = inp+''
        console.dir(String.prototype)
        var start = inp.substr(0,1);
        var center = inp.substr(1,inp.length-1).replace(/./g,'*')
        // do{
        //   center = center.replace(/.*/g,'*')
        // }while(center)
        
        console.log(center)
        var end = inp.substr(inp.length-1,1);
        return start + center+end
      }
    }
  }
}
</script>

<style lang='less'>
.realName{
  
  .front{
    width:100%;
    height:163px;
    background: #F8F9FF;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    margin-top: 40px;
    .con{
      width:70%;
      position: absolute;
      top:50%;
      left:50%;
      transform: translate(-50%,-50%);
      .left{
        float: left;
        width:45%;
      }
      .right{
        float: right;
        width:45%;
        text-align: center;
        position: relative;
        img{
          width:48%;
          margin: auto;
          margin-top: 5%;
        }
        p{
          text-align: center;
          font-size: 14px;
          color: #333333;
          margin-top: 5%;
        }
        input{
          width:100%;
          height:100%;
          position: absolute;
          top:0;
          right:0;
          opacity: 0;
        }
      }
    }
    
  }
  .save{
    background: #FFFFFF;
    border: 1px solid #E7E7E7;
    box-shadow: 1px 8px 18px 0 rgba(0,0,0,0.03);
    border-radius: 15px;
    width:100%;
    font-size: 14px;
    color: #333333;
    margin-top: 100px;
    padding: 15px 0;
  }
  .completed{
    width:100%;
    background: #FDDF00;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    margin-top: 20px;
    padding: 25px;
    position: relative;
    img{
      vertical-align: top;
      width:50px;
      height:50px;
      border-radius:50px;
    }
    span{
      font-size: 14px;
      color: #333333;
      line-height: 50px;
      margin-left: 10px;
    }
    p{
      font-size: 14px;
      margin: 10px 5px;
      color: #333333;
    }
    button{
      width:72px;
      height:30px;
      background: #003A9B;
      border-radius: 100px;
      color: #fff;
      font-size: 12px;
      position: absolute;
      right:20px;
      top:30px;
    }
  }
}

</style>
